<template>
	<view class="container">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in banner">
				<view class="swiper-item"><image class="img" :src="item.image_url" mode=""></image></view>
			</swiper-item>
		</swiper>

		<uni-grid :column="5" :highlight="true" class="cate">
			<uni-grid-item v-for="(item, index) in cate" :index="index" :key="index">
				<view class="grid-item-box">
					<image :src="item.icon_url" class="image" mode="widthFix" />
					<text class="text">{{ item.name }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- <uni-grid :column="5" class="cate">
			<uni-grid-item v-for="item in cate">
				<image :src="item.icon_url" mode="widthFix"></image>
				<text class="text">{{ item.name }}</text>
			</uni-grid-item>
		</uni-grid> -->
		
		<view class="goods">
			<goodsItem v-for="item in hotGoods" :item="item"></goodsItem>
		</view>
	</view>
</template>

<script>
import { getIndex } from '../../request/api.js';
export default {
	data() {
		return {
			banner: [],
			cate: [],
			brandList: [],
			hotGoods: []
		};
	},
	methods: {},
	onLoad() {
		getIndex().then(res => {
			console.log(res);
			this.banner = res.banner;
			this.cate = res.channel;
			this.brandList = res.brandList;
			this.hotGoods = res.hotGoods;
		});
	}
};
</script>

<style lang="scss">
.container {
	font-size: 14px;
	line-height: 24px;
	.swiper {
		width: 100%;
	}
	.swiper-item {
		width: 100%;
		height: 300rpx;
		image {
			width: 100% !important;
			height: 100%;
		}
	}
	.cate {
		image {
			width: 80px;
		}
	}
	.goods{
		width: 100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		>view{
			width: 48%;
			image{
				width: 100%;
			}
			
		}
	}
}
</style>
